import {NumberIdAndName} from "../types/BasicModels";
import {GoodsItem, GoodsSelector, GoodsSelectorItem} from "./GoodsWithSubGoodsSelector";
import {Drawer, DrawerProps, Form, Select, Table, Tooltip, Typography} from "antd";
import SelectUtils from "../utils/SelectUtils";
import React, {ReactNode, useEffect, useMemo, useState} from "react";
import {getAllGoodsBrand} from "../apis/GoodsBrandsApi";
import {getAllGoodsCategories} from "../apis/GoodsCategoriesApi";
import {queryAllGoodsBrandTags} from "../apis/GoodsBrandTagApi";
import TextUtils from "../utils/TextUtils";
import {
    MarketShoppingGuideSalaryPlanRuleDetailPreviewResponse
} from "../apis/MarketShoppingGuideSalaryPlanDetailPreviewApi";
import ArrayUtils from "@zxy-cn/array-utils";

export function GoodsMatcherRuleFormItems(props: {
    goodsBrandTags: NumberIdAndName[],
    goodsBrands: NumberIdAndName[],
    goodsCategories: NumberIdAndName[],
    goodsList: GoodsSelectorItem[],
    onGoodsListChange: (v: number[], data: GoodsSelectorItem[]) => void
}) {
    return <>
        <Form.Item name={"includedBrandTagIds"} label={"包含品牌标签"}>
            <Select showSearch style={{minWidth: 200}}
                    filterOption={SelectUtils.filterByLabelOption}
                    mode={"multiple"} options={props.goodsBrandTags.map(it => ({
                value: it.id,
                label: it.name
            }))}/>
        </Form.Item>
        <Form.Item name={"includedBrandIds"}
                   label={"包含品牌"}>
            <Select showSearch style={{minWidth: 200}}
                    filterOption={SelectUtils.filterByLabelOption}
                    mode={"multiple"} options={props.goodsBrands.map(it => ({
                value: it.id,
                label: it.name
            }))}/>
        </Form.Item>
        <Form.Item name={"includedCategoryIds"}
                   label={"包含分类"}>
            <Select showSearch style={{minWidth: 200}}
                    filterOption={SelectUtils.filterByLabelOption}
                    mode={"multiple"} options={props.goodsCategories.map(it => ({
                value: it.id,
                label: it.name
            }))}/>
        </Form.Item>
        <Form.Item label={"包含商品"} name={"includedGoodsIds"}>
            <GoodsSelector
                data={props.goodsList}
                mode={"multiple"}
                onChange={props.onGoodsListChange}/>
        </Form.Item>
    </>;
}

export interface GoodsMatcherRuleCondition {
    includedBrands: Array<NumberIdAndName>
    includedCategories: Array<NumberIdAndName>
    includedBrandTags: Array<NumberIdAndName>
    includedGoodsList: Array<GoodsItem>
}

export function useQueryGoodsMatcherBasicData() {
    const [goodsBrands, setGoodsBrands] = useState<NumberIdAndName[]>([])
    useEffect(() => {
        getAllGoodsBrand().then(response => {
            setGoodsBrands(response.data)
        })
    }, []);

    const [goodsCategories, setGoodsCategories] = useState<NumberIdAndName[]>([])
    useEffect(() => {
        getAllGoodsCategories().then(response => {
            setGoodsCategories(response.data)
        })
    }, []);

    const [goodsBrandTags, setGoodsBrandTags] = useState<NumberIdAndName[]>([])
    useEffect(() => {
        queryAllGoodsBrandTags().then(response => {
            setGoodsBrandTags(response.data)
        })
    }, []);
    return {goodsBrands, goodsCategories, goodsBrandTags};
}

export function useGoodsMatcherConditions(condition: GoodsMatcherRuleCondition) {
    const conditionDescriptions: ReactNode[] = useMemo(() => {
        const array: ReactNode[] = []
        if (condition.includedCategories.length) {
            array.push(<GoodsMatcherConditionDescription prefixText={"商品类目为"}
                                                         textList={condition.includedCategories.map(it => it.name)}/>)
        }
        if (condition.includedBrands.length) {
            array.push(<GoodsMatcherConditionDescription prefixText={"商品品牌为"}
                                                         textList={condition.includedBrands.map(it => it.name)}/>)
        }
        if (condition.includedBrandTags?.length) {
            array.push(<GoodsMatcherConditionDescription prefixText={"商品品牌具有"}
                                                         textList={condition.includedBrandTags.map(it => it.name)}
                                                         suffixText={"标签"}/>)
        }
        if (condition.includedGoodsList?.length) {
            array.push(<GoodsMatcherConditionDescription prefixText={"商品是"}
                                                         textList={condition.includedGoodsList.map(it => it.name)}
                                                         suffixText={"标签"}/>)
        }
        return array
    }, [condition.includedBrands, condition.includedGoodsList, condition.includedBrandTags, condition.includedCategories]);

    return conditionDescriptions
}

export const GoodsMatcherConditionDescription: React.FC<{
    prefixText: string,
    textList: string[],
    suffixText?: string
}> = ({
          prefixText,
          textList,
          suffixText
      }) => {
    return <Typography.Text>{prefixText}
        <Tooltip title={textList.length <= 3 ? null : textList.join("、")}>
            <Typography.Text
                italic>{TextUtils.omitArrayToTextInChinese(textList, 3)}</Typography.Text>
        </Tooltip>
        {suffixText}
    </Typography.Text>
}

export interface GoodsMatcherResultDrawerProps extends DrawerProps {
    data: MarketShoppingGuideSalaryPlanRuleDetailPreviewResponse[]
}

export const GoodsMatcherResultDrawer: React.FC<GoodsMatcherResultDrawerProps> = (props) => {
    return <Drawer {...props} width={document.body.clientWidth * 0.618}>
        <Table<MarketShoppingGuideSalaryPlanRuleDetailPreviewResponse> columns={[
            {title: "名称", dataIndex: "name"},
            {title: "条码", dataIndex: "barcode"},
            {title: "小计销量", dataIndex: "saleAmount"},
            {title: "小计金额", dataIndex: "saleFee"},
        ]}
                                                                       dataSource={props.data}
                                                                       summary={(_) => <>
                                                                           <Table.Summary>
                                                                               <Table.Summary.Cell index={0}
                                                                                                   colSpan={2}>合计</Table.Summary.Cell>
                                                                               <Table.Summary.Cell
                                                                                   index={2}>{ArrayUtils.sum(props.data, i => i.saleAmount).toFixed(2)}</Table.Summary.Cell>
                                                                               <Table.Summary.Cell
                                                                                   index={3}>{ArrayUtils.sum(props.data, i => i.saleFee).toFixed(2)}</Table.Summary.Cell>
                                                                           </Table.Summary>
                                                                       </>}
        />
    </Drawer>
}